<template>
    <div class="IndexConfig">
        <el-card class="IndexConfig-card">
            <el-form :model="form" label-width="300px">
                <el-form-item label="首页头部背景图：">
                    <el-upload 
                        class="image-upload" 
                        v-model:file-list="bannerFileList"
                        action="/api/tiequan/upload" 
                        list-type="picture-card" 
                        :auto-upload="true"
                        :limit="1"
                        :on-success="BannerImageSuccess">
                        <el-icon><Plus /></el-icon>
                        <template #file="{ file }">
                            <div class="banner-image">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span
                                        class="el-upload-list__item-preview"
                                        @click="handlePictureCardPreview(file)"
                                    >
                                        <el-icon :size="24"><zoom-in /></el-icon>
                                    </span>
                                    <span
                                        class="el-upload-list__item-delete"
                                        @click="BannerImageRemove(file)"
                                    >
                                        <el-icon :size="24"><Delete /></el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="店名（最多可输入5位）：">
                    <el-input class="storeName-input" v-model="form.storeName" maxlength="5" placeholder="请输入店铺名称" />
                </el-form-item>
                <el-form-item label="店铺二维码：">
                    <el-upload 
                        class="image-upload" 
                        v-model:file-list="qrCodeFileList"
                        action="/api/tiequan/upload" 
                        list-type="picture-card" 
                        :auto-upload="true"
                        :limit="1"
                        :on-success="QrCodeImageSuccess">
                        <el-icon><Plus /></el-icon>
                        <template #file="{ file }">
                        <div class="banner-image">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                >
                                    <el-icon :size="24"><zoom-in /></el-icon>
                                </span>
                                <span
                                    class="el-upload-list__item-delete"
                                    @click="QrCodeImageRemove(file)"
                                >
                                    <el-icon :size="24"><Delete /></el-icon>
                                </span>
                            </span>
                        </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="内容展示列表（多张）：">
                    <el-upload 
                        class="image-upload" 
                        v-model:file-list="contentFileList"
                        action="/api/tiequan/upload" 
                        list-type="picture-card" 
                        :auto-upload="true"
                        :on-success="ContentListImagesSuccess"
                        :limit="10">
                        <el-icon><Plus /></el-icon>
                        <template #file="{ file }">
                        <div class="banner-image">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                >
                                    <el-icon :size="24"><zoom-in /></el-icon>
                                </span>
                                <span
                                    class="el-upload-list__item-delete"
                                    @click="ContentImageRemove(file)"
                                >
                                    <el-icon :size="24"><Delete /></el-icon>
                                </span>
                            </span>
                        </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item class="opera-form-item">
                    <el-button type="primary"  @click="SaveConfig">保 存</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </div>
</template>
    
<script setup>
import { ref,reactive, onMounted } from 'vue';
import { Plus,Delete,ZoomIn } from "@element-plus/icons";
import { GetHomeConfig,SetHomeConfig } from '../utils/api/index.js';
const form = reactive({
    bannerImage: '',
    storeName: '',
    qrCodeImageUrl: ''
});
const bannerFileList = ref([]);
const qrCodeFileList = ref([]);
const contentFileList = ref([]);
const saveFlag = ref(false);
const GetConfig = () => {
    GetHomeConfig({}).then((res) => {
        if(res.code == 200) {
            bannerFileList.value = [{
                url: res.data.bgImg
            }]
            form.storeName = res.data.title;
            qrCodeFileList.value = [{
                url: res.data.QRCode
            }]
            contentFileList.value = res.data.list.map((res) => {
                return {
                    url: res.img
                }
            })
        }
    })
};
const BannerImageSuccess = ( res,) => {
    if(res.code == 200) {
        form.bannerImage = res.data.path;
    } 
};
const BannerImageRemove = () => {
    bannerFileList.value = [];
};
const QrCodeImageSuccess = ( res,) => {
    if(res.code == 200) {
        form.qrCodeImageUrl = res.data.path;
    } 
};
const QrCodeImageRemove = () => {
    qrCodeFileList.value = [];
};
const ContentListImagesSuccess = ( ) => {
};
const ContentImageRemove = (file) => {
    let tarIdx = contentFileList.value.findIndex(res => res.uid == file.uid);
    contentFileList.value.splice(tarIdx,1);
};
const SaveConfig = () => {
    if(saveFlag.value) return;
    saveFlag.value = true;
    let contentList = contentFileList.value.map((res) => {
        return {
            img: res.response !=  undefined ? res.response.data.path : res.url,
            href: ''
        }
    });
    SetHomeConfig({
        title: form.storeName,
        bgImg: form.bannerImage,
        QRCode: form.qrCodeImageUrl,
        list: contentList
    }).then(res => {
        saveFlag.value = false;
        if(res.code == 200){
            GetConfig();
            // eslint-disable-next-line no-undef
            ElMessage({
                showClose: true,
                message: '保存成功',
                type: 'success',
            })
        };
    })
};
onMounted(() => {
    GetConfig()
})
</script>
    
<style scoped lang="scss">
.IndexConfig{
    width: 100%;
    height: 100%;
    &-card{
        width: 100%;
        height: 100%;
        :deep .el-card__body{
            height: 100%;
            overflow-y: scroll;
            .el-form{
                margin: 20px;
                .el-form-item{
                    .el-form-item__label{
                        font-weight: 600;
                    }
                    .storeName-input{
                        width: 200px;
                    }
                    .image-upload{
                        .el-upload-list{
                            width: 100%;
                            height: 100%;
                            .el-upload{
                                width:  180px;
                                height: 180px;
                            }
                            .el-upload-list__item{
                                width:  180px;
                                height: 180px;
                            }
                        }
                    }
                }
            }
           
        }
    }
}
</style>